<style type="text/css">
    #editor {
        min-height: 250px;
        background-color: white;
        border-collapse: separate;
        border: 1px solid rgb(204, 204, 204);
        padding: 4px;
        box-sizing: content-box;
        -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
        box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
        border-top-right-radius: 3px; border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px; border-top-left-radius: 3px;
        overflow: scroll;
        outline: none;
    }
    #editor {overflow:scroll; max-height:500px}
    div[data-role="editor-toolbar"] {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .dropdown-menu a {
        cursor: pointer;
    }
    .input-xlarge {
        width: 470px;
        height: 90px;
    }
    .help-block{
        margin-left: 100px;
    }
    .form-horizontal .control-label{
        float: left;
        width: 100px;
        padding-top: 5px;
        text-align: left;
    }
    .form-horizontal .controls{
        margin-left: 0px;
    }
</style>
<script>
    /*
     * jQuery Hotkeys Plugin
     * Copyright 2010, John Resig
     * Dual licensed under the MIT or GPL Version 2 licenses.
     *
     * Based upon the plugin by Tzury Bar Yochay:
     * http://github.com/tzuryby/hotkeys
     *
     * Original idea by:
     * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
     */

    (function(jQuery){

        jQuery.hotkeys = {
            version: "0.8",

            specialKeys: {
                8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
                20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
                37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
                96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
                104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
                112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
                120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 191: "/", 224: "meta"
            },

            shiftNums: {
                "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
                "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
                ".": ">",  "/": "?",  "\\": "|"
            }
        };

        function keyHandler( handleObj ) {
            // Only care when a possible input has been specified
            if ( typeof handleObj.data !== "string" ) {
                return;
            }

            var origHandler = handleObj.handler,
                    keys = handleObj.data.toLowerCase().split(" "),
                    textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color"];

            handleObj.handler = function( event ) {
                // Don't fire in text-accepting inputs that we didn't directly bind to
                if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
                        jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
                    return;
                }

                // Keypress represents characters, not special keys
                var special = event.type !== "keypress" && jQuery.hotkeys.specialKeys[ event.which ],
                        character = String.fromCharCode( event.which ).toLowerCase(),
                        key, modif = "", possible = {};

                // check combinations (alt|ctrl|shift+anything)
                if ( event.altKey && special !== "alt" ) {
                    modif += "alt+";
                }

                if ( event.ctrlKey && special !== "ctrl" ) {
                    modif += "ctrl+";
                }

                // TODO: Need to make sure this works consistently across platforms
                if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
                    modif += "meta+";
                }

                if ( event.shiftKey && special !== "shift" ) {
                    modif += "shift+";
                }

                if ( special ) {
                    possible[ modif + special ] = true;

                } else {
                    possible[ modif + character ] = true;
                    possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;

                    // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
                    if ( modif === "shift+" ) {
                        possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
                    }
                }

                for ( var i = 0, l = keys.length; i < l; i++ ) {
                    if ( possible[ keys[i] ] ) {
                        return origHandler.apply( this, arguments );
                    }
                }
            };
        }

        jQuery.each([ "keydown", "keyup", "keypress" ], function() {
            jQuery.event.special[ this ] = { add: keyHandler };
        });

    })( jQuery );
</script>
<ul class="breadcrumb" style="border-radius: none;">
    <li><a href="{%appurl controller=default action=index%}">哥是老中医首页</a> <span class="divider">/</span></li>
    <li class="active">创建快乐药房</li>
</ul>
<h4>创建快乐药方</h4>
<form id="content-create-form" class="form-horizontal" method="POST" action="{%appurl controller=default action=create%}">

    <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
        <div class="btn-group">
            <input type="hidden" name="insert_picture_file_url" value="" />
            <a class="btn fileinput-button">
                <input class="insert-pircure-btn" type="file" name="file" multiple="">
                <i class="icon-picture icon-white"></i>添加图片
            </a>
        </div>
    </div>
    <div id="editor" style="margin-bottom: 20px;">
    </div>
    <!--<div class="control-group">-->
        <!--<label class="control-label">药效级别</label>-->
        <!--<div class="controls">-->
            <!--<select name="" id="">-->
                <!--<option value="1">1</option>-->
                <!--<option value="2">2</option>-->
                <!--<option value="3">3</option>-->
                <!--<option value="4">4</option>-->
                <!--<option value="5">5</option>-->
                <!--<option value="6">6</option>-->
                <!--<option value="7">7</option>-->
                <!--<option value="8">8</option>-->
                <!--<option value="9">9</option>-->
            <!--</select>-->
            <!--<div class="help-block">1级可以对付轻度悲伤患者，9级可以对付高度忧郁者</div>-->
        <!--</div>-->
    <!--</div>-->
    <div class="control-group">
        <div class="controls">
            <input type="submit" class="btn btn-success btn-large" value="提交内容">
        </div>
    </div>
</form>
<script type="text/javascript" src="{%$_jsserver%}lib/jqueryupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="{%$_jsserver%}lib/jqueryupload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="{%$_jsserver%}lib/jqueryupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="{%$_jsserver%}lib/jqueryupload/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="{%$_jsserver%}lib/jqueryupload/jquery.fileupload-validate.js"></script>

<script type="text/javascript">
    $(function(){
        $("#content-create-form input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        $("#content-create-form").ajaxForm({
            dataType:"json",
            beforeSubmit:function(arr){
                //打包轮播图片数据
                arr.push({
                    name:'joke_content',
                    type:"hidden",
                    value:$("#editor").cleanHtml()
                })
                return true;
            },
            success:function(response){
                if(response.success){
                    Miu.ui.messageBox.showSuccess("内容提交成功！","你可以选择以下操作：",[{
                        name:"继续创建",
                        close:false,
                        style:"success",
                        url:"{%appurl controller=default action=create%}"
                    },{
                        name:"返回列表页",
                        close:false,
                        url:"{%appurl controller=default action=index%}"
                    }]);
                }else{
                    Miu.ui.messageBox.showError("内容提交失败！",response.info,[{
                        name:"重试",
                        close:true,
                        style:"success",
                        url:"#"
                    }]);
                }
            },

            error:function(error,msg){
                Miu.ui.messageBox.showError("内容提交失败！",msg,[{
                    name:"重试",
                    style:"success",
                    close:true,
                    url:"#"
                }]);
            }
        });

        $(".btn-toolbar .insert-pircure-btn").fileupload({
            url: 'index.php?controller=uploader&action=appresource',
            dataType: 'json',
            autoUpload: true,
            formData:{type:'image',app_id:"{%$app.app_id%}"},
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000 // 5 MB
        }).on('fileuploadadd', function (e, data) {
                    $(".upload-picture-msg").html("等待上传");
                }).on('fileuploadprocessalways', function (e, data) {
                    var fileData = data.files[0];
                    if(fileData.error){
                        $(".upload-picture-msg").addClass("text-error").html(fileData.error);
                    }else{
                        $(".upload-picture-msg").removeClass("text-error").html("等待上传").show();
                    }
                }).on('fileuploadprogress', function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $(".upload-picture-msg").html('已上传'+progress + '%');
                }).on('fileuploadstop',function(e){
                }).on('fileuploaddone', function (e, data) {
                    if(data.result.success){
                        $("input[name='insert_picture_file_url']").val(data.result.data.file_thumb);
                        $("input[name='insert_picture_file_url']").trigger("change");
                        $(".upload-picture-msg").html("");
                    }else{
                        $(".upload-picture-msg").addClass("text-error").html(data.result.info);
                    }
                }).on('fileuploadfail', function (e, data) {
                    $(".upload-picture-msg").addClass("text-error").html("上传文件失败，请重试!");
                });
        $('a[title]').tooltip({container:'body'});
        $('#editor').wysiwyg();
    });

</script>
